<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--
for in
for of
-->

<div id="app">
  <h1>{{ msg }}</h1>
  <hr>
  <ul>
<!--    <li v-for="item in list">{{ item }}</li>-->
<!--    <li v-for="(item, index) in list">-->
    <li
      v-for="(item, index) of list"
      :key="item.message"
    >
      {{ index + 1 }} - {{ item }}
    </li>
  </ul>
  <hr>
  <ul>
<!--    <li v-for="(val, key) of object">-->
    <li v-for="(val, key, index) of object">
      {{ index + 1 }}. {{ key }} : {{ val }}
    </li>
  </ul>
  <hr>
  <div>
<!--    <div v-for="n in 10">-->
    <template v-for="n in 10">
      <span>{{ n }} </span>
      <button>+</button>
      <br>
    </template>
  </div>
</div>

<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    data: {
      msg: "hello vue 列表渲染!",
      list: [
        { message: 'Foo' },
        { message: 'Bar' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    },
    methods: {

    }
  }).$mount("#app")
</script>

<!--
不会成为真实的标签
<template></template>

v-if=""
v-else-if=""
v-else


key: 这两个元素是完全独立的，不要复用它们


v-if vs v-show
v-if 是“真正”的条件渲染
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
-->

</body>
</html>
